<script setup lang="ts">
import DriverStrokeCard from "~/components/passenger/DriverStrokeCard.vue";

let route=useRoute()
let date=new Date(route.query.time as string);
let id=route.query.id as string;
let quickConfirm=route.query.quickConfirm;
const items:Ref<StrokePO[]>=ref([])
onMounted(function (){
  cFetch('/stroke/api/itinerary/list',{
    auth:true,
    defaultOpts:{
      method:'POST',
      body:{
        id:id
      }
    }
  }).then(res=>{
    let t=res as ApiResponse<StrokePO>
    items.value=t.data;
  }).catch(err=>{
    console.log(err)
    showFailToast('发生错误')
  })
})
function goInvite(id:string){
  navigateTo(route.path+'/'+id)
  // console.log(useRoute().path)
}
</script>

<template>

    <div class="main">
      <div class="info">
        <h2 style="color: RGB(30,144,255);text-align: center;margin: 11px 0;">等待车主邀请……</h2>
        <p>出发地：{{route.query.from}}</p>
        <p>目的地：{{route.query.to}}</p>
        <p>出发时间：{{date.getFullYear()}}年{{date.getMonth()+1}}月{{date.getDate()}}日 {{date.getHours().toString().padStart(2,'0')}}:{{date.getMinutes().toString().padStart(2,'0')}}</p>
        <p style="color: seagreen" v-if="quickConfirm==='1' ">【快速确认】</p>
        <p style="display: flex;justify-content: end;"><span style="position: relative; color: RGB(30,144,255); font-weight: bold;" @click="goInvite(id)">邀请我的 >></span></p>
      </div>

      <div class="drop">
        <span class="title">顺路的车主：</span>
        <DriverStrokeCard
            v-for="item in items"
            :id="item.id"
            :user-alias="item.useralias"
            :from="item.startAddr"
            :to="item.endAddr"
            :start-distance='item.startDistance'
            :end-distance='item.endDistance'
            :departure-time="new Date(item.departureTime)"
            :quality='item.quantity'
            :avatar="item.avatar"
            :suitability="item.suitability"
        >
        </DriverStrokeCard>

      </div>

    </div>

</template>

<style scoped>
.main{
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.info{
  border-radius: 12px;
  background-color: RGB(227,231,228);
  padding: 14px;
  border: 1px solid gray;
  width: 80%;
  margin: 20px auto;

  position: sticky;
  top: 0;
  z-index: 1;
}
.info p{
  position: relative;
  margin: 10px 0;
  overflow-x: auto;
  white-space: nowrap;
}
.drop{
  display: flex;
  flex-direction: column;
  border: 1px solid gray;
  width: calc(80% + 14*2px);
  border-radius: 6px;
  position: relative;
  margin-bottom: 25px;
}
.title{
  width: calc(100% - 29px);
  background-color: ghostwhite;
  padding: 14px;
  border: 1px solid gray;
  border-radius: 6px 6px 0 0;
  color: #ae820b;
  position: relative;
}

</style>